import { GrowlMessageType } from './../../../components/messageBox/growMeaageType';
import { MessageBoxService } from './../../../components/messageBox/messageBoxService';
import { LocalstorageDataManage } from './../../../common/localstoreage/localstoreageDataManage';
import { Terminal } from './../../../models/terminal';
import { FrontStoreStocksService } from './../../../services/frontStoreStocksService';
import { InitializationService } from './../index';
import { PrividerService } from './../prividerService';
import { Component, Input, NgModule, HostBinding, OnInit } from '@angular/core';


@Component({
    selector: 'bind-chef',
    template: `
        <div class="bind-container" fxLayout="column">
            <header fxLayoutAlign="start center">
                <i class="material-icons back" (click)="onBack()">arrow_back</i>
                <h1>选择制作台显示方案</h1>
                <div class="nav">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i class="active">4</i>
                </div>
            </header>
            <div class="bind-content padding-left" fxLayout="column">
                <span class="text-xxl margin-t-m">设置终端名称</span>
                <md-input-container floatingPlaceholder="false">
                    <input md-input type="text" [(ngModel)]="terminal.name" placeholder="设置终端名称">
                </md-input-container>
                <span class="text-xxl margin-t-m">选择制作台显示方案</span>
                <span class="text-s color-gray margin-t-m">不同的制作档口选用不同的显示方案，制作台显示方案在店铺管理设置</span>
                <section fxLayout="row" class="margin-t-m">
                    <select [(ngModel)]="selectedSolutionId" (change)="selectSolution()">
                        <option *ngFor="let solution of solutions" value="{{solution.id}}">{{solution.name}}</option>
                    </select>
                    <!--<md-select placeholder="制作台显示方案">
                        <md-option *ngFor="let solution of solutions" [value]="state.code">{{ state.name }}</md-option>
                    </md-select>-->
                </section>
                <div fxLayoutAlign="center center" class="margin-t-l">
                    <button (click)="beginUse()" class="btn-primary">开始使用</button>
                </div>
            </div>
        </div>
    `,
    styleUrls: ['./bindChef.scss']
})

export class BindChef implements OnInit {

    constructor(
        private frontStoreStocksSvr: FrontStoreStocksService
    ) { }
    private solutions:any = [];
    private selectedSolutionId;
    private selectedSolution;
    private terminal: Terminal = <Terminal>{
        id: "prduce",
        name: "PR1"
    };

    async ngOnInit() {
        this.solutions = await this.frontStoreStocksSvr.getChefKitchenSolutions();
        this.selectedSolutionId = "all";
        this.selectSolution();
    }

    /**
     * 开始使用
     */
    async beginUse() {
        console.log(this.terminal.name.length)
        if (!(this.terminal.name.trim())) {
            MessageBoxService.current.Growl(GrowlMessageType.Error, "请设置终端名称");
            return false;
        }
        if (this.terminal.name.trim() && this.terminal.name.length > 20) {
            MessageBoxService.current.Growl(GrowlMessageType.Error, "终端名不能超过20个字符");
            return false;
        }
        if (!(this.selectedSolution && this.selectedSolution.id)) {
            MessageBoxService.current.Growl(GrowlMessageType.Error, "请选择制作台显示方案");
            return false;
        }
        LocalstorageDataManage.current.setTerminal(this.terminal);
        LocalstorageDataManage.current.setValidSolution(this.selectedSolution);
        location.reload();
    }
    onBack() {
        PrividerService.current.navigate(InitializationService.current.getPathByComponentName("remoteLogin"))
    }

    selectSolution() {
        const solution = this.solutions.find(x => x.id == this.selectedSolutionId);
        this.selectedSolution = {
            id: solution.id,
            name: solution.name
        }
    }
}